<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>题目2</title>
</head>
<style>
    /* 2.利用CSS调整网页显示样式 */

/*整体*/
    #ensemble{
        margin: 0 25%;/*整体内容放在左右页边距25%处*/
        width: 960px;/*整体块的宽度设置为960像素，与标题图宽度一致*/
    }

/*3折疯抢*/
    #discount{
        float: right;/*3折疯抢块向右浮动定位*/
    }
    /*疯抢块的主体*/
    #discount>table{
        background-color: #EAFFFA;/*主体的背景色*/
        border-top: #C8ECE3 solid 1px;/*上边框颜色*/
        border-right: #C8ECE3 solid 1px;/*右边框颜色*/
        border-left: #C8ECE3 solid 1px;/*左边框颜色*/
        height: 30px;/*主体表格的高度*/
        position: relative;/*相对定位*/
        top:22px;
        z-index: 1;/*Z轴定位，将主体表格放在3折疯抢图Z轴上的下方*/
    }
    /*疯抢块主体内的单元格样式*/
    #zhe>td{
        width: 55px;/*单元格宽度*/
        color: #7B7B7B;/*字体颜色*/
        font-size:5px;/*字体大小*/
        text-align: center;/*字体居中*/
    }
    /*3折疯抢图*/
    #icon{
        position: relative;/*相对定位*/
        top:-22px;
        left:13px;
        z-index: 2;/*Z轴定位，将图片放在主体Z轴上方*/
    }

/*导航*/
    nav{
        background-image: url(img/menuBg.jpg);/*导航底图*/
        width: 960px;/*导航块的宽度，与标题图的宽度一致*/
        height: 36px;/*导航块的高度*/
        position: relative;/*相对定位*/
        top:5px;
    }
    /*导航块内的表格中单元格样式*/
    #navtr>td{
        width: 56px;/*单元格宽度，平均分*/
        color: white;/*字体颜色*/
        text-align: center;/*字体居中*/
        line-height: 33px;/*行距*/
        font-size: 13px;/*字体大小*/
    }

/*标题图*/
    #titlepic{
        position: relative;/*相对定位*/
        top:15px;
    }

/*主体*/
    section{
        border:#CCE9AC solid 2px;/*主体块的边框颜色、样式为实线、宽度为2像素*/
        height: 365px;/*主体块的高度*/
        width: 956px;/*主体块宽度，为标题图宽度960px减去左右边框宽度，即960-(2+2)px*/
        position: relative;/*相对定位*/
        top:25px;
        z-index: 5;/*设置Z轴，避免被主体中图片遮盖*/
    }
    /*图书畅销榜图片*/
    #bg_bang{
        position: relative;/*相对定位*/
        top:15px;
        right: 12px;
    }
    /*书名类的样式*/
    .booktitle{
        color: #1A66B3;/*3本书的书名文字颜色*/
        font-size:15px;/*书名字体的大小*/
    }
    /*正文类的样式*/
    .text{
        font-size: 10px;/*正文字体大小*/
    }
    /*价格类的样式*/
    .cost{
        color:#8E112B;/*价格文字颜色*/
        font-size: 10px;/*价格字体大小*/
        line-height: 23px;/*行高，与对应的正文行高相同，正文行高在3本书对应块分别设置*/
    }
    /*折扣类的样式*/
    .count{
        color:#5EA593;/*折扣字体颜色*/
        font-size: 10px;/*折扣字体大小*/
    }
    /*第1本书的书图*/
    #book01{
        position:relative;/*相对定位*/
        top:30px;
        right: 35px;
        z-index: 3;/*设置Z轴达成图片在数字1图片下方并避免遮盖主体块的边框*/
    }
    /*数字1图片*/
    #No1{
        position: relative;/*相对定位*/
        bottom: 185px;
        right: 279px;
        z-index: 4;/*设置Z轴达到遮盖书图的效果*/
    }
    /*第1本书的文字块*/
    #figure1>article{
        width: 280px;/*块的宽度*/
        position: relative;/*相对定位*/
        bottom:218px;
        left:225px;
        line-height: 21px;/*正文的行高*/
    }
    /*第2本书的书图*/
    #book02{
        position:relative;/*相对定位*/
        bottom: 476px;
        left:524px;
        z-index: 3;/*设置Z轴达成图片在数字2图片下方*/
    }
    /*数字2图片*/
    #No2{
        position: relative;/*相对定位*/
        bottom: 548px;
        left: 420px;
        z-index: 4;/*设置Z轴达到遮盖书图的效果*/
    }
    /*第2本书的文字块*/
    #figure2>article{
        width: 280px;/*块的宽度*/
        position: relative;/*相对定位*/
        bottom:577px;
        left:625px;
        line-height: 23px;/*正文的行高*/
    }
    /*第3本书的书图*/
    #book03{
        position:relative;/*相对定位*/
        bottom: 591px;
        left:524px;
        z-index: 3;/*设置Z轴达成图片在数字3图片下方*/
    }
    /*数字3图片*/
    #No3{
        position: relative;/*相对定位*/
        bottom: 663px;
        left: 420px;
        z-index: 4;/*设置Z轴达到遮盖书图的效果*/
    }
    /*第3本书的文字块*/
    #figure3>article{
        width: 280px;/*块的宽度*/
        position: relative;/*相对定位*/
        bottom:692px;
        left:625px;
        line-height: 23px;/*正文的行高*/
    }

/*页脚*/
    foot{
        width: 960px;/*页脚块的宽度，与标题图的宽度一致*/
        position: relative;/*相对定位*/
        left: 135px;
    }
    /*页脚图片*/
    foot>img{
        position: relative;/*相对定位*/
        top:25px;
    }
    /*页脚的文字*/
    foot>font{
        color:#848484;/*字体颜色*/
        font-size:5px;/*字体大小*/
        position: relative;/*相对定位*/
        top:5px;
    }
</style>
<body>
    <!-- 1.利用html构建网页 -->

    <div id="ensemble">

        <!--logo-->
        <img id="logo" src="img/logo.jpg">

        <!--3折疯抢块-->
        <div id="discount">
            <!--主栏,插入表格标签-->
            <table>
                <tr id="zhe">
                    <td><font>尾品汇</font></td>
                    <td><font>当当优品</font></td>
                    <td><font>数字馆</font></td>
                    <td><font>都看阅器</font></td>
                </tr>
            </table>
            <!--3折疯抢-->
            <div id="icon">
                <img src="img/icon_count.png">
            </div>
        </div>

        <!--导航-->
        <nav>
            <!--插入表格标签-->
            <table>
                <tr id="navtr">
                    <td><font>首页</font></td>
                    <td><font>图书</font></td>
                    <td><font>音像</font></td>
                    <td><font>童装</font></td>
                    <td><font>服装</font></td>
                    <td><font>鞋靴</font></td>
                    <td><font>运动</font></td>
                    <td><font>箱包</font></td>
                    <td><font>美妆</font></td>
                    <td><font>珠宝</font></td>
                    <td><font>家居</font></td>
                    <td><font>食品</font></td>
                    <td><font>酒</font></td>
                    <td><font>手机</font></td>
                    <td><font>数码</font></td>
                    <td><font>电脑</font></td>
                    <td><font>家电</font></td>
                </tr>
            </table>
        </nav>

        <!--当当图书榜-->
        <img id="titlepic" src="img/banner.png">

        <!--主体-->
        <section>
            <!--图书畅销榜-->
            <div id="bg_bang">
                <img src="img/bg_bang.gif">
            </div>
            <!--第1本书-->
            <figure id="figure1">
                <!--书图-->
                <img id="book01" src="img/book-01.jpg">
                <!--NO1-->
                <img id="No1" src="img/bookNo1.gif">
                <!--文字块-->
                <article>
                    <!--书名类-->
                    <font class="booktitle">偷影子的人</font><br>
                    <!--文本类-->
                    <font class="text">作 者：[法] 马克 · 李维（Marc Levy） 著</font><br>
                    <font class="text">出版社：湖南文艺出版社</font><br>
                    <font class="text">当当价：</font><font class="cost">￥ 17.90</font><br><!--价格类-->
                    <font class="text">出版社：湖南文艺出版社</font><br>
                    <font class="text">不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”</font>
                </article>
            </figure>
            <!--第2本书-->
            <figure id="figure2">
                <!--书图-->
                <img id="book02" src="img/book-02.jpg">
                <!--NO2-->
                <img id="No2" src="img/bookNo2.gif">
                <!--文字块-->
                <article>
                    <!--书名类-->
                    <font class="booktitle">看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</font><br>
                    <!--文本类-->
                    <font class="text">作 者：柴静 著</font><br>
                    <font class="text">出版社：广西师范大学出版社</font><br>
                    <!--价格类和折扣类-->
                    <font class="cost">￥ 29.40</font><font class="count">&nbsp;&nbsp;&nbsp;&nbsp;7.4折</font>
                </article>
            </figure>
            <!--第3本书-->
            <figure id="figure3">
                <!--书图-->
                <img id="book03" src="img/book-03.jpg">
                <!--NO3-->
                <img id="No3" src="img/bookNo3.gif">
                <!--文字块-->
                <article>
                    <!--书名类-->
                    <font class="booktitle">改变孩子先改变自己</font><br>
                    <!--文本类-->
                    <font class="text">作 者：贾容韬 贾毅 著</font><br>
                    <font class="text">出版社：作家出版社</font><br>
                    <!--价格类和折扣类-->
                    <font class="cost">￥ 22.20</font><font class="count">&nbsp;&nbsp;&nbsp;&nbsp;7.4折</font>
                </article>
            </figure>
        </section>

        <!--页脚-->
        <foot>
            <font>Copyright（C）当当网 2004-2017,All Rights Reserved</font>
            <img src="img/validate.gif">
            <font>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</font>
        </foot>
    </div>
</body>
</html>